<template>
  <el-col :span="17" class="effective-clue">
    <div class="w32">{{labelName}}</div>
    <div class="w68">
      <span
        v-for="(interest,index1) in interestList"
        :key="index1"
        @click="interestButton(interest,index1)"
        :class="{'selectedClass-crmFactSysConf':interest.checked}"
      >
        {{interest.lookupValueName}}
        <i :class="{'selectedClass-i-crmFactSysConf':interest.checked}"></i>
      </span>
    </div>
  </el-col>
</template>
<script>
import { crmApis } from "@/api/apiList/crm";
import { requestAPI } from "@/api/commonRequest";
export default {
  props: {
    labelName: { type: String, default: "购车要素" },
    interest: {
      lookupValueName: { type: String },
      checked: { type: Boolean }
    },
    getVal: { type: String, default: "" }
  },
  data() {
    return {
      interestList: this.getDrpList()
    };
  },
  mounted() {
    this.$nextTick(() => {
    });
  },
  watch: {
    getVal(xzz) {
      debugger
      let val = xzz.split(",");
      for (let i = 0; i < this.interestList.length; i++) {
        for (let j = 0; j < val.length; j++) {
          if (this.interestList[i].lookupValueName == val[j]) {
            this.interestList[i].checked = true;
          }
        }
      }
      this.$set(this.interestList, 0, this.interestList[0]);
    }
  },
  methods: {
    getDrpList: function() {
      let that = this;
      debugger
      let queryObj = {
        // api配置
        apiConfig: crmApis.mdsLookupValueQueryByPage,
        // 需要调用的API服务配置
        apiServices: [
          {
            //表格中台返回网格的字段
            apiQueryRow: ["lookupValueCode","lookupValueName"]
          }
        ],
        //条件/实体参数（变量），根据typeParam中的定义配置
        variables: {
          pageSize: 10,
          pageIndex: 1,
          //当前中台使用的名称有dataInfo、info，具体查看API文档
          dataInfo: {lookupTypeCode:"VE0067"}//值列表编码
        }
      };
      let paramD = that.$getParams(queryObj);
      // 调用中台API方法（可复用）
      requestAPI(paramD).then(response => {
        if (
          response.result == "1"
          //&&response.rows != ""
        ) {
          that.interestList=response.rows
          that.interestList.forEach(item => {
            item["checked"]=false;
            item["disable"]=false;
          });
          this.getData();
        }
      });
    },
    interestButton(item, index) {
      debugger
      item.checked = !item.checked;
      //需热更新，否则状态没法改变
      this.$set(this.interestList, index, item);
      let interest = "";
      for (var i = 0; i < this.interestList.length; i++) {
        if (this.interestList[i].checked == true) {
          if (interest == "") {
            interest = this.interestList[i].lookupValueName;
          } else {
            interest += "," + this.interestList[i].lookupValueName;
          }
        }
      }
      this.$emit("changeCode", interest);
    },
    buttonReset() {
      if (!this.interestList) {
        return;
      }
      for (var i = 0; i < this.interestList.length; i++) {
        this.interestList[i].checked = false;
        this.$set(this.interestList);
      }
    },
    sendCode() {
      for (var i = 0; i < this.cityClueList.length; i++) {
        let interest = "";
        if (this.interestList[i].checked == true) {
          if (interest == "") {
            interest = this.interestList[i].lookupValueName;
          } else {
            interest += "," + this.interestList[i].lookupValueName;
          }
        }
      }
      this.$emit("changeCode", interest);
    },
    // 从客户管理带值到个人客户信息维护
    getData() {
      let that = this;
      let val = that.getVal.split(",");
      for (let i = 0; i < this.interestList.length; i++) {
        for (let j = 0; j < val.length; j++) {
          if (this.interestList[i].lookupValueName == val[j]) {
            this.interestList[i].checked = true;
          }
        }
      }
    }
  }
};
</script>
<style>
.selectedClass-crmFactSysConf {
  position: relative;
  border: 1px solid #333 !important;
  color: #333 !important;
}
.selectedClass-i-crmFactSysConf {
  position: absolute;
  border-bottom: 12.4px solid #333;
  border-left: 1.3rem solid transparent;
  width: 0px;
  height: 0px;
  bottom: 0rem;
  right: 0;
}
.disableClass-crmFactSysConf {
  color: #333;
  background-color: #fff;
}
.disableClass-crmFactSysConf:hover {
  cursor: default !important;
  color: #333 !important;
  background-color: #fff !important;
}

.effective-clue {
  text-align: left;
  margin: 10px 0;
}
.effective-clue .w68 span {
  display: inline-block;
  min-width: 60px;
  margin-left: 10px;
  margin-bottom: 10px;
  height: 28px;
  line-height: 28px;
  border: 1px solid #ddd;
  border-radius: 2px;
  font-size: 12px;
  padding-top: 0px;
  padding-bottom: 0px;
  text-align: center;
  color: #333;
}
.selectedClass-crmFactSysConf::after {
  color: #fff;
  content: "\2714";
  position: absolute;
  bottom: -9px;
  right: -3px;
  font-size: 0.5rem;
}
.effective-clue .w68 span:hover {
  /* background-color: #b3d8ff; */
  /* color: #409eff; */
  border: 1px solid #333;
  cursor: pointer;
}
.effective-clue .w32 {
  width: 9%;
  text-align: right;
  display: inline-block;
  height: 32px;
  line-height: 32px;
  vertical-align: top;
}
.effective-clue .w68 {
  width: 90%;
  display: inline-block;
}
.city-clue .el-button {
  margin-left: 10px;
  min-width: 61px;
}
.visit-setting .el-input {
  padding-right: 50px;
}
.visit-setting .el-input__suffix {
  right: 55px;
}
.visit-setting .el-form-item__content > span {
  position: absolute;
  right: 0;
  top: 0;
}
</style>
